<template>
  <div id="view-notice">
    <div class="container">
      <!-- 1, 公告详情 -->
      <div class="content">
        <h1>{{detail.notice_title}}</h1>
        <h3>{{detail.notice_content}}</h3>
        <p>{{detail.notice_time}}</p>
      </div>
      <!-- 2, 公告列表 -->
      <div class="sider">
        <a-list size="large" bordered :data-source="data" class="lists">
          <template #renderItem="{ item }">
            <a-list-item :key="item.id" class="item">
              <template #actions>
                <span @click="getNoticeDetail(item)">{{item.notice_title}}</span>
                <span>{{item.notice_time}}</span>
              </template>
            </a-list-item>
          </template>
          <template #header class="header">
            <h3 class="title">公告</h3>
          </template>
        </a-list>

        <!-- 分页 -->
        <a-pagination
          v-model:current="current"
          v-model:page-size="pageSizeRef"
          :page-size-options="pageSizeOptions"
          :total="total"
          show-size-changer
          @showSizeChange="onShowSizeChange"
        >
          <template #buildOptionText="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-else>全部</span>
          </template>
        </a-pagination>

        <img src="@/images/notice.png" alt="" id="img-notice">
        <img src="@/images/叉叉.png" alt="" @click="$router.push('/home')" id="img-back">
      </div>
    </div>
    <!-- 3, footer -->
    <div class="footer"><h3>@光谷智慧交通</h3></div>
  </div>
</template>
  
<script setup>
import { ref,reactive,onMounted } from 'vue'
import $api from '@/request/api.js'

// 设置分页的数据
const pageSizeOptions = ref(['6', '4', '2']);
const current = ref(1);
const pageSizeRef = ref(6);
const total = ref(0)
const onShowSizeChange = (current, pageSize) => {
  pageSizeRef.value = pageSize;
};

// 存放所有公告 arrsy
let data = ref([])
//存放一项公告 object
let detail = ref({})

onMounted(()=>{
  // 获取所有公告
  $api.getNotice().then(res=>{
    data.value = res.result
    total.value = res.result.length
    detail.value = res.result[0]
  })
})

//点击获取一项公告详情
const getNoticeDetail = function(notice){
  detail.value = notice
}
</script>
  
<style scoped>
#view-notice{
  background: rgb(62, 85, 165);
  padding-top:5vh;
}
.container{
  width:80vw;
  margin:0 auto;
  background: white;
  border:1px solid #999;
}

.footer{
  height: 10vh;
  display: flex;
  justify-content: center;
  padding-top:10px;

}
.container{
  display: flex;
  /* justify-content: space-between; */
}
.content{
  height:85vh;
  width:60vw;
  padding:10vh 10vw;
  line-height:50px;
  border-right:2px solid #999;
  box-sizing: border-box;
}
.sider{
  width:30vw;
}
.sider .title{
  margin-top:5vh;
  margin-left:4vw;
  color:rgb(62, 85, 165);
  font-weight:700;
}
.sider .item:first-child{
  border-top:2px solid #999;
}
#img-notice{
 position: fixed;
 bottom: 5vh;
 right: 3vw;
 width: 15vw;
}
#img-back{
  position: absolute;
  top: 7vh;
  right: 11vw;
  width: 2vw;
}
.ant-pagination {
  position: fixed;
  margin-top: 10px;
  left: 67vw;
}
</style>